<template>
  <div class="login-box">
    <div class="title">{{ title }}</div>
    <div class="form-box">
      <a-form
        :model="formState"
        :rules="rulesRef"
        name="basic"
        autocomplete="off"
        @finish="onFinish"
      >
        <a-form-item name="username">
          <a-input class="input" placeholder="请输入登录账号" v-model:value="formState.username" />
        </a-form-item>

        <a-form-item name="password">
          <a-input-password
            class="input"
            placeholder="请输入登录密码"
            v-model:value="formState.password"
          />
        </a-form-item>
        <a-form-item>
          <a-button class="button" type="primary" html-type="submit">登录</a-button>
        </a-form-item>
      </a-form>
      <slot></slot>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'

interface FormState {
  username: string
  password: string
}
defineProps({
  title: {
    type: String,
    required: true,
  },
})
const emit = defineEmits(['success', 'failed'])
const rulesRef = reactive({
  accountNumber: [
    {
      required: true,
      message: '请输入登录账号',
    },
  ],
  password: [
    {
      required: true,
      message: '请输入登录密码',
    },
  ],
})
const formState = reactive<FormState>({
  username: '',
  password: '',
})
const onFinish = (values: FormState) => {
  emit('success', values)
}
</script>
<style lang="stylus" scoped>
.login-box
  width  472px
  padding 36px
  box-shadow: 2px 4px 6px 0px rgba(0,0,0,0.12);
  border-radius: 10px;
  background: #FFFFFF;
  .title
    font-size: 26px
    line-height 44px
    color:#000

  .form-box
    width: 400px
    .input
      height 56px
      margin-top 30px
      background: #FFFFFF;
      box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12);
      border-radius: 6px;
      border 0
    .button
      height 56px
      width 100%
      margin-top 30px
</style>
